<!--
//
// 本地报表打印入口
// hs-admin
//
// Created by 区区电脑 on 2023/12/20.
//
-->
<template>
    <div class="Index">
        <div class="print-header"></div>
        <div class="print-content">
            <iframe ref="reportIframe" :src="src" class="print-content-iframe"></iframe>
            <div class="print-fixed">
                <el-tooltip content="打印" placement="right">
                    <el-button :icon="Printer" circle type="primary" @click="print"/>
                </el-tooltip>
                <el-tooltip content="刷新" placement="right">
                    <el-button :icon="RefreshLeft" circle plain style="margin-left: unset; margin-top: 10px" type="primary" @click="reload"/>
                </el-tooltip>
            </div>
        </div>
        <div class="print-footer"></div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import {
    Printer,
    RefreshLeft,
} from '@element-plus/icons-vue'
import request from "@/request"

window.$request = request;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
const route = useRoute();
// store
const store = useStore();

// 路由参数
const query = computed(() => route.query)
// 路由参数字符串
const queryStr = window.location.hash.replace("#/local-print?", "")

// iframe 内容
const src = computed(() => {
    return `/prints/${query.value.file}`
})

/**
 * 刷新页面
 */
function reload() {
    window.location.reload()
}

// iframe 组件
const reportIframe = ref()

/**
 * 打印
 */
function print() {
    const event = JSON.stringify({
        method: "print"
    })
    reportIframe.value.contentWindow.postMessage(event)
}

// 给 iframe 提供的方法
const methods = {}

// 注册事件
window.addEventListener("message", (e) => {
    if (typeof e.data === "string") {
        console.log(e.data)
        const data = JSON.parse(e.data);
        const method = data.method;
        methods[method] && methods[method](data.data)
    }
})


onMounted(() => {
    const event = JSON.stringify({
        method: "init",
        data: query.value
    })
    reportIframe.value.onload = () => {
        reportIframe.value.contentWindow.postMessage(event)
    }
    //setTimeout(() => {
    //    reportIframe.value.contentWindow.postMessage(event)
    //}, 100)
})
</script>

<style lang="scss" scoped>
.Index {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 100vh;

    .print-header {
        //width: 100%;
        //height: 50px;
    }

    .print-content {
        flex: 1;
        width: 210mm;
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        position: relative;
        margin: 10px 0;

        .print-content-iframe {
            width: 100%;
            height: 100%;
            border: none;
            margin: unset;
        }

        .print-fixed {
            position: absolute;
            right: -60px;
            top: 100px;
            z-index: 99;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
    }

    .print-footer {

    }


}
</style>
